@import '../../src/assets/css/default.less';

@searchPrefixCls: yh-search;

// search-bar
@search-bar-fill: #fff;
@search-bar-wrapper-height: 51px;
@search-bar-height: 50px;
@search-bar-input-fill: #f2f2f2;
@search-bar-input-height: 30px;
@search-bar-font-size: 14px;
@search-color-icon: #aaa; // input search icon 的背景色
@search-bar-border-color: #ddd;
@search-bar-radius: 5px;
@search-bar-wrapper-h-spacing: 8px;

.@{searchPrefixCls}-wrap {
    height: @search-bar-wrapper-height;
}

.@{searchPrefixCls} {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    padding: 0 @search-bar-wrapper-h-spacing;
    background-color: @search-bar-fill;
    height: @search-bar-height;
    // border-bottom: 1px solid @search-bar-border-color; /*no*/

    &-fixed {
        position: fixed;
        top: 44px;
        left: 0;
        right: 0;
        z-index: @navbar-z-index;
    }

    &-input {
        position: relative;
        flex: 1;
        -webkit-flex: 1;
        //margin: 0 10px;
        height: @search-bar-input-height;
        line-height: @search-bar-input-height;
        background-color: @search-bar-input-fill;
        border-radius: @search-bar-radius;
        background-clip: padding-box;
        .icon {
            position: absolute;
            color: @search-color-icon;
            font-size: @search-bar-font-size;
            height: @search-bar-input-height;
            line-height: @search-bar-input-height;
            z-index: 2;
            &.yhicon-search {
                //top: 3px;
                left: 10px;
            }
            &.yhicon-delete-circle {
                //top: 3px;
                right: 8px;
                display: none;
            }
            &.@{searchPrefixCls}-close-show {
                display: block;
            }
        }
        input {
            position: absolute;
            top: 0;
            left: 0;
            border: 0;
            outline: 0 none;
            color: @color-text-base;
            font-size: @search-bar-font-size;
            height: @search-bar-input-height;
            //line-height: @search-bar-input-height;
            text-align: left;
            display: block;
            width: 100%;
            padding: 0 5px 0 35px;
            background-color: transparent;
            box-sizing: border-box;
            z-index: 1;
            -webkit-appearance: none;
            &.show-close {
                padding-right: 30px;
            }
        }
    }
    &-cancel {
        color: @color-text-base;
        font-size: @search-bar-font-size;
        padding-left: 15px;
        text-align: right;
        height: @search-bar-height;
        line-height: @search-bar-height;
        opacity: 0;

        &-anim {
            -webkit-transition: margin-right .3s,opacity .3s;
            transition: margin-right .3s,opacity .3s;
            -webkit-transition-delay: .1s;
            transition-delay: .1s;
        }
        &-show {
            opacity: 1;
        }
    }
}
